<template>
    <div>
    <div class="hot-navbar">
      <van-nav-bar title="场库精选">
        <template #left>
            <van-icon name="arrow-left"  size="20" color="#323233" @click="back"/>
        </template>
      </van-nav-bar>
    </div>
      <div class="list-card">
        <ul class="list">
          <li v-for="(item, i) in list" :key="i" @click="toVideo(item.children[0].model.resource.id)">
            <div class="top">
              <div class="top-left">
                <img v-lazy="item.children[0].model.resource.author?.userinfo.avatar" alt="" />
                <span>{{ item.children[0].model.resource.author?.userinfo.username }}</span>
                <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/09/055d70f8a79a45b.png"
                alt=""
                class="vip"
                v-show="item.children[0].model.resource.author?.userinfo.vip_flag === 1"
              />
              </div>
              <div class="top-right">
                <div class="action">+ 关注</div>
                <van-icon name="ellipsis" />
              </div>
            </div>
            <div class="center">
              <h5>{{item.children[0].model.resource.title}}</h5>
              <div class="img-box">
                <img v-lazy=item.children[0].model.resource.cover alt="" />
              </div>
            </div>
            <div class="bottom">
              <div class="bottom-left">
                <van-icon name="like-o" size="16" color="#000" />
                <span>{{ item.children[0].model.resource.count.count_like }}</span>
                <van-icon name="comment-o" size="16" color="#000" />
                <span>{{ item.children[0].model.resource.count.count_comment }}</span>
                <van-icon name="star-o" size="16" color="#000" />
                <span>{{ item.children[0].model.resource.count.count_collect }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </template>
  <script>
  import axios from "axios";
  import VueAxios from "vue-axios";
  export default {
    data() {
      return {
        list: [
          
        ],
      };
    },
    methods: {
      async getMustSeeList() {
        const res = await axios.get("https://apis.netstart.cn/xpc/home/vmovier");
        this.list = res.data.data.children;
      },
      toVideo(id){
        this.$router.push({
          path: "/Video",
          query: {id: id},
        });
      },
      back(){
        this.$router.go(-1)
    }
    },
    mounted() {
      this.getMustSeeList();
    },
  };
  </script>
  <style lang="scss">
  .list-card {
    padding-bottom: 60px;
    .list {
      padding: 2.6232vw;
      padding-top: 0;
      background: #f4f4f4;
      li {
        background: #fff;
        border-radius: 15px;
        margin-bottom: 20px;
      }
  
      .top {
        display: flex;
        justify-content: space-between;
        padding: 2.4155vw 2.4144vw 1vw 2.4vw;
        align-items: center;
        .top-left {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 5px;
            margin-left: 8px;
          }
          span {
            margin-left: 10px;
          }
        }
        .top-right {
          display: flex;
          align-items: center;
          div {
            color: #d65644;
          }
          .van-icon {
            transform: rotate(90deg);
            margin-left: 25px;
          }
        }
      }
      .center {
        h5 {
          margin-top: 10px;
          margin-bottom: 10px;
          padding: 0 2.4155vw;
          margin-left: 25px;
        }
        .img-box {
          img {
            width: 100%;
            height: 340px;
          }
        }
      }
      .bottom {
        width: 100%;
        padding: 15px 0;
        .bottom-left {
          text-align: center;
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 20px;
          .van-icon {
            left: 9.333vw;
          }
          span {
            margin-left: 10px;
            flex-grow: 1;
          }
        }
      }
    }
  }
  .hot-navbar{
  .van-nav-bar {
    height: 12.2657vw;
   border-bottom: 1px solid #ccc;
  }
  .van-nav-bar__content{
    height: 10.7vw;

    .van-nav-bar__title{
        font-size:25px;
        line-height: 10.7vw;
        
    }
  }
}
  </style>